<template>
  <div>
    <el-card>
      <el-row justify="end" type="flex">
        <el-col :span="2">
          <el-button class="el-icon-edit" size="small" type="success" @click="menuDialog">添加菜单</el-button>
        </el-col>
      </el-row>
      <el-table :data="list" :tree-props="{children: 'childs', hasChildren: 'hasChildren'}" default-expand-all
                row-key="id">
        <el-table-column align="center" label="标题" prop="title">
          <template v-slot="{ row }">
            <i :class="
                row.childs
                  ? 'el-icon-folder-opened'
                  : row.is_point
                  ? 'el-icon-view'
                  : 'el-icon-tickets'
              "
            />{{ row.title }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="权限点代码" prop="code"></el-table-column>
        <el-table-column align="center" label="操作">
          <template slot-scope="{ row }">
            <el-button
              circle
              class="small-btn"
              icon="el-icon-edit"
              type="primary"
              @click="editMenu(row.id)"
            ></el-button>
            <el-button
              circle
              class="small-btn"
              icon="el-icon-delete"
              type="danger"
              @click="removeMenu(row.id)"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <MenuAdd
      ref="menuRef"
      :page-title="pageTitle"
      :text="text"
      @handleCloseModal="handleCloseModal"
      @newDataes="newDataes"
    ></MenuAdd>
  </div>
</template>

<script>
import { list, remove } from '@/api/base/menus'
import MenuAdd from '@/module-manage/components/menu-add'
import { Message } from 'element-ui'

export default {
  components: { MenuAdd },
  data () {
    return {
      list: [],
      pageTitle: '权限',
      text: '',
      defaultProps: {
        label: 'title',
        children: 'childs'
      }
    }
  },
  created () {
    this.getMenusList()
  },
  methods: {
    handleCloseModal () {
      this.$refs.menuRef.dialogFormH()
    },
    async newDataes (menu) {
      await this.getMenusList()
      Message.success(`${menu.id ? '编辑成功' : '添加成功'}`)
    },
    editMenu (id) {
      this.$refs.menuRef.dialogFormV()
      this.$refs.menuRef.hanldeEditForm(id)
      this.text = '编辑'
    },
    // 删除菜单
    async removeMenu (id) {
      try {
        await this.$confirm('你确定要删除这个菜单吗?', { type: 'warning' })
        await remove({ id })
        await this.getMenusList()
        Message.success('删除成功')
      } catch (e) {
        Message.info('取消删除')
      }
    },
    async getMenusList () {
      const res = await list()
      this.list = this.treeNodeChange(res.data)
    },
    menuDialog () {
      // console.log(123)
      this.$refs.menuRef.dialogFormV()
      this.text = '添加'
    },
    treeNodeChange (data) {
      data.forEach((item) => {
        const isPoint = item.childs === undefined && item.points === undefined
        const hasChilds = item.childs !== undefined && item.childs.length > 0
        const hasPoints = item.points !== undefined && item.points.length > 0
        if (isPoint) {
          return item
        } else if (hasChilds) {
          this.treeNodeChange(item.childs)
        } else if (hasPoints) {
          this.treeNodeChange(item.points)
          item.childs = item.points
        }
      })
      return data
    }
  }
}
</script>

<style lang='less' scoped>

</style>
